<template class="ec-i-tem">
  <div id="ec-index">
    <!--<div class="ec-i-top">-->
      <!--<ectitle></ectitle>-->
    <!--</div>-->
    <div class="ec-i-con">
      <eclist>
        <img slot="ec-i-t-pic" src='static/images/eng-corner/book.png' alt="书籍"/>
        <span slot="ec-i-t">书库</span>
        <div slot="ec-i-list-con">
            <div v-if="!this.isLoading" class="ec-i-list1-img" v-for="item in this.bookList.data">
              <router-link :to="{path:'/common/subDetail',query: { bookId:item.bookId,title:item.bookName}}">
                  <img :src="item.imgSrc" alt="书本图片"/>
              </router-link>
            </div>
            <div v-if="this.isLoading">jiazaizhong ...</div>
        </div>
      </eclist>
        <eclist v-for="item in eclist.data">
          <img slot="ec-i-t-pic" :src='item.imgSrc'/>
          <span slot="ec-i-t">{{item.name}}</span>
          <div slot="ec-i-list-con">{{item.des}}</div>
        </eclist>
      <div class="endYd" v-show="isLogin"></div>
      <div class="friend-div" v-show="isLogin">
        <ul class="friend-list">
          <li></li>
          <li></li>
          <li></li>
          <li>+9</li>
        </ul>
        <router-link :to="{path:'/common/ecFriend',query:{title:title}}"><div class="more-friend"></div></router-link>
      </div>
    </div>

  </div>
</template>
<script>
//  import ectitle from './ec-title.vue'
  import eclist from './ec-i-list.vue'
  export default{
      name:'ec-index',
      data: function(){
        return {
          bookList:{
            url:'static/engcorner.json',
            data:[]
          },
          eclist: {
            'url': 'static/engcorner.json',
            'data': []
          },
          title:'英语角',
          dTitle:'详情',
          isLoading:true
      }
      },
      props:['isLogin','username'],
      components:{
        'eclist':eclist
      },
      mounted:function(){
        var that=this;
        that.loadList();
        this.loadBook();
      },
      methods:{
        loadList:function(){
          var that=this;
          that.$http.get(""+this.eclist.url)
            .then(function(response){
              that.eclist.data=response.data.eclist;
            })
        },
        loadBook:function(){
          this.$http.get(""+this.bookList.url).then(function(response){
            this.bookList.data=response.data.bookList;
            this.isLoading=false;
          })
        }
      }
  }

</script>
<style>
  .ec-i-tem{
    margin:0;
    padding:0;
  }
  #ec-index{
    width: 100%;
    overflow-x: hidden;
  }
  .ec-i-top{
    width: 100%;
    height: 25%;
    background: #ED6942;
  }
  .ec-i-list1-img{
     display: inline-block;

   }
  .ec-i-con{
    padding: 5% 0;
  }
  .friend-div{
    display: flex;
  }
  .friend-list{
    width: 60%;
    display: flex;
    margin-left: 20px;
  }
  .friend-list>li{
    list-style: none;
    width: 45px;
    height:45px;
    line-height:45px;
    border-radius: 100%;
    margin:2%;
    float: left;
  }
  .friend-list>li:nth-of-type(1){
    background: url("../../../static/images/eng-corner/friend1.png") center center;
    background-size: cover;
  }
  .friend-list>li:nth-of-type(2){
    background: url("../../../static/images/eng-corner/friend2.png") center center;
    background-size: cover;
  }
  .friend-list>li:nth-of-type(3){
    background: url("../../../static/images/eng-corner/friend3.png") center center;
    background-size: cover;
  }
  .friend-list>li:nth-of-type(4){
    border:2px solid #aaa;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
  }
  .more-friend{
    display: inline-block;
    width:55px;
    height:55px;
    border-radius: 100%;
    background: #33a3cb url("../../../static/images/eng-corner/addFriend.png") center center no-repeat;
    background-size: 45%;
    border: 3px solid #fff;
    box-shadow: 3px 5px 10px #aaa;
    margin-top:35px;
  }
  .endYd{
    border:4px solid #ED6942;
    width: 10px;
    height:10px;
    margin-left: 35px;
    border-radius: 100%;
  }
  @media (max-width:320px){
    .friend-list{
      width: 55%;
      display: flex;
      margin-left: 10px;
    }
    .friend-list>li{
      width: 35px;
      height:35px;
      line-height:35px;
    }
    .more-friend{
      width:40px;
      height:40px;
      margin:25px 0 0 10px;
      box-shadow:2px 3px 5px #aaa;
    }
    .endYd {
      border:2px solid #ED6942;
      width: 5px;
      height: 5px;
      margin-left: 29px;
    }
  }
</style>
